<template>
	<u-popup v-model="showPopup" mode="bottom" border-radius="20" :mask-close-able="false" :safe-area-inset-bottom="true">
		<view class=" u-border-bottom u-flex u-row-between" style="padding: 25rpx 35rpx;">
			<text class="u-tips-color" @click="showPopup=false">取消</text>
			<view class="u-font-32 ">
				{{title}}
			</view>
			<view class="u-type-primary" @click="comfimPopup">确认</view>
		</view>
		<view class="u-flex class-list u-col-top">
			<view class="left-menu">
				<scroll-view scroll-y="true" style="height: 700rpx;" :show-scrollbar="false" enhanced>
					<view>
						<view class="menu-item" :class="[selecClass.id==item.id?'active':'']" v-for="(item,index) in classList"
							:key="index" @click="meunChange(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="right-tag" v-if="type=='multiSelector'">
				<view class="tag-item" :class="[selectTags.find(tg=>tg.id==item.id)?'active':'']"
					v-for="(item,index) in classTags" :key="index" @click="tagChange(index)">{{item.name}}</view>
			</view>
			<view class="right-tag-selector" v-else>
				<scroll-view scroll-y="true" style="height: 700rpx;" :show-scrollbar="false" enhanced>
					<view>
						<view class="tag-item-selector" :class="[selectTags.find(tg=>tg.id==item.id)?'active':'']"
							v-for="(item,index) in classTags" :key="index" @click="tagChange(index)">
							<text>{{item.name}}</text>
							<u-icon name="checkmark" size="32" v-if="selectTags.find(tg=>tg.id==item.id)"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "bb-picker",
		props: {
			title: {
				type: String,
				default: ''
			},
			value: {
				type: Boolean,
				default: false
			},
			classOneID: {
				type: [Number, String],
				default: 0
			},
			classTwoId: {
				type: [Number, String],
				default: ''
			},
			classThreeIds: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'multiSelector'
			}
		},
		data() {
			return {
				showPopup: false,
				result: {},
				classList: [],
				classTags: [],
				selecClass: {},
				selectTags: [],
			};
		},
		watch: {
			value(val) {
				if (val && this.classList.length == 0) {
					if (this.type == 'multiSelector') {
						this.queryClassList(this.classOneID)
					} else {
						this.queryClassList(0)
					}

				}
				this.showPopup = val
			},
			showPopup(val) {
				this.$emit('input', val)
			},

			classOneID(val) {
				if (val) {
					console.log('大分类');
					if (this.type == 'multiSelector') {
						this.classList = []
						this.selectTags = []
					}
				}
			}
		},
		methods: {
			queryClassList(pid, type = -1) {
				if (type >= 0 && this.classList[type] && this.classList[type].children) {
					this.classTags = this.classList[type].children
					return
				}
				this.$u.api.public.industry_class({
					pid
				}).then(res => {
					if (type < 0) {
						this.classList = res;
						const selectMuneId = this.type == 'multiSelector' ? this.classTwoId : this.classOneID;
						console.log(selectMuneId);
						this.selecClass = selectMuneId ? res.find(item => `${selectMuneId}`.indexOf(item.id) >= 0) : res[0];
						for (let i = 0; i < this.classList.length; i++) {
							this.queryClassList(this.classList[i].id, i)
						}

					} else {
						this.classList[type].children = res;
						if (this.selecClass.id == pid) {
							this.classTags = res;
							if (this.type == 'selector') {
								this.selectTags = res.filter(item => this.classTwoId == item.id)
							}
						}
						if (this.type == 'multiSelector') {
							const tags = this.classThreeIds.split(',')
							this.selectTags = res.filter(item => tags.includes(item.id + '')).concat(this.selectTags)
						}
					}
				})
			},
			comfimPopup() {
				if (this.selectTags.length > 0) {
					this.showPopup = false
					this.$emit('confirm', {
						oneClass: this.selecClass,
						tags: this.selectTags,
					})
				} else {
					let tips = this.type == 'multiSelector' ? '请选择擅长标签' : '请选择行业类别'
					this.$u.toast(tips)
				}
			},
			meunChange(index) {
				this.selecClass = this.classList[index];
				if (this.type == 'selector') {
					this.selectTags = []
				}
				this.queryClassList(this.selecClass.id, index)
			},
			tagChange(index) {
				const tagID = this.classTags[index].id;
				const tindex = this.selectTags.findIndex(item => item.id == tagID)

				if (tindex >= 0) {
					this.selectTags.splice(tindex, 1)
				} else {
					if (this.selectTags.length >= 10) {
						this.$u.toast('最多选择10个标签')
					} else {
						if (this.type == 'selector') {
							this.selectTags = [this.classTags[index]]
						} else {
							this.selectTags.push(this.classTags[index])
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.class-list {}

	.left-menu {
		padding-left: 10rpx;
		background-color: #F6F6F6;
		min-width: 220rpx;
	}

	.menu-item {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #EFEFEF;

		&.active {
			background-color: #FFFFFF;
			border-color: #F6F6F6;
			color: $u-type-primary;
		}
	}

	.right-tag {
		flex: 1;
		display: flex;
		flex-wrap: wrap;

		.tag-item {
			padding: 10rpx 20rpx;
			border: 1rpx solid #D9D9D9;
			color: #666666;
			border-radius: 10rpx;
			margin: 14rpx;

			&.active {
				color: $u-type-primary;
				border-color: $u-type-primary;
			}
		}

	}

	.right-tag-selector {
		flex: 1;

		.tag-item-selector {
			padding: 20rpx 50rpx;
			border-bottom: 1rpx solid transparent;
			display: flex;
			justify-content: space-between;

			&.active {
				color: $u-type-primary;
			}
		}
	}
</style>